<!DOCTYPE html>
<html>

<head>
	<title>欢迎使用儿童智能机器人</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"
	/>
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="format-detection" content="telephone=no" />
	<script type="text/javascript">

		// 使用指南
		function selfProductUseGuide() {
			var useGuideDiv = document.getElementById("self_product_use_guide");
			useGuideDiv.onclick = function () {
				alert('使用指南');
			}
		}
		// 常见问题
		function selfProductQuestions() {
			var questionsDiv = document.getElementById("self_product_questions");
			questionsDiv.onclick = function () {
				alert('常见问题');
			}
		}

		// -----

		// 使用指南
		function thirdProductUseGuide() {
			var useGuideDiv = document.getElementById("third_product_use_guide");
			useGuideDiv.onclick = function () {
				alert('使用指南');
			}
		}
		// 常见问题
		function thirProductQuestions() {
			var questionsDiv = document.getElementById("third_product_questions");
			questionsDiv.onclick = function () {
				alert('常见问题');
			}
		}

		window.onload = function () {
			selfProductUseGuide();
			selfProductQuestions();

			thirdProductUseGuide();
			thirProductQuestions()
		}

	</script>
	<style type="text/css">
		.div_first {
			display: flex;
			margin: 0 auto;
			text-align: center;
			margin-top: 1rem;
			width: 88%;
			height: 8rem;
			padding: 0.5rem;
			background-color: #1ddbd0;
			border-radius: 0.3rem;
			box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
		}

		.div_second {
			display: flex;
			margin: 0 auto;
			text-align: center;
			margin-top: 1.5rem;
			width: 88%;
			height: 8rem;
			padding: 0.5rem;
			background-color: #8fc64b;
			border-radius: 0.3rem;
			box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
		}

		.div_left {
			height: 100%;
			width: 70%;
			display: flex;
			flex-direction: column;
		}

		.div_right {
			height: 100%;
			width: 30%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		/* 中间内容区域 */

		.div_title {
			width: 100%;
			height: 50%;
			display: flex;
			flex-direction: column;
			font-size: 1.3rem;
			font-weight: 600;
		}

		/* 底部以及顶部空白区域 */

		.div-black {
			width: 100%;
			height: 27%;
			font-size: 1.3rem;
			display: flex;
			justify-content: center;
			text-align: center;
			color: white;
		}

		/* div圆角矩形 */

		.div_row {
			display: flex;
			width: 100%;
			height: 19%;
			text-align: center;
			justify-content: center;
		}

		.div_row_content {
			display: flex;
			flex-direction: row;
			text-align: center;
			justify-content: center;
			margin-top: 0.5rem;
		}

		.div_rectangle {
			height: 1.2rem;
			width: 4.0rem;
			font-size: 0.7rem;
			border-radius: 2rem;
			/* -webkit-box-shadow: #666 0px 0px 10px;
			-moz-box-shadow: #666 0px 0px 10px;
			box-shadow: #666 0px 0px 10px; */
			border: 0.09rem solid;
			border-color: white;
			display: flex;
			justify-content: center;
			text-align: center;
			padding-top: 0.11rem;
			color: #F5F5F5
		}

		.img {
			width: auto;
			height: auto;
			max-width: 100%;
			max-height: 100%;
		}
	</style>
</head>


<body>

	<div style="width: 100%;height: 100%">
		<div class="div_first">
			<div class="div_left">
				<div class="div-black"></div>
				<div class="div-black">
					小谷儿童机器人
				</div>
				<div class="div_row">
					<div class="div_row_content">
						<div class="div_rectangle" id="self_product_use_guide">使用说明</div>
						<div style="width: 1rem"></div>
						<div class="div_rectangle" id="self_product_questions">常见问题</div>
					</div>
				</div>
				<div class="div-black"></div>
			</div>
			<div class="div_right">
				<img class="img" src="./self_logo.png" />
			</div>

		</div>

		<div class="div_second">
			<div class="div_left">
				<div class="div-black"></div>
				<div class="div-black">
					小童机器人
				</div>
				<div class="div_row">
					<div class="div_row_content">
						<div class="div_rectangle" id="third_product_use_guide">使用说明</div>
						<div style="width: 1rem"></div>
						<div class="div_rectangle" id="third_product_questions">常见问题</div>
					</div>
				</div>
				<div class="div-black"></div>
			</div>
			<div class="div_right">
				<img class="img" src="./third_logo.png" />
			</div>
		</div>
	</div>
</body>

</html>